﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache,	must-revalidate" />
	<meta http-equiv="expires" content="0" />

	<title>照片</title>

	<link rel="stylesheet" href="/Web/css/common.css" />
	<link rel="stylesheet" href="/web/component/common/font-awesome.min.css">

	<script src="/web/js/jquery.351.min.js"></script>
	<script src="/web/js/common.js"></script>
	<script src="/web/js/form.js"></script>

	<style>
		.left, .right { height: 100%; z-index: 10; position: absolute; }
		.left { left: 0px }
		.right { right: 0px; top: 0px }

		button { height: 100%; line-height: 100%; font-size: 50px; color: white; background-color: rgb(0, 0, 0, 0.5); border: none; }

		img { max-width: 100%; max-height: calc(100% - 100px); }

		#op, #info { text-align: center }
		#info { color: white }

		p { -webkit-line-clamp: 2; display: -webkit-inline-box !important; overflow: hidden !important; text-overflow: ellipsis !important; word-wrap: break-word; white-space: normal !important; -webkit-box-orient: vertical !important; }
		p { background-color: lavender }
	</style>

	<script>
		var th = location.href;
		var photoId = !th.includes(`?photo=`) && !th.includes(`&photo=`) ? null : th.split(/&|\?/g).filter(p => p.startsWith("photo="))[0].split("=")[1];
		var owner = !th.includes(`?owner=`) && !th.includes(`&owner=`) ? null : th.split(/&|\?/g).filter(p => p.startsWith("owner="))[0].split("=")[1];

		$(async () =>
		{
			let result = await request("获取图片", `view.ashx?cmd=view&photo=${photoId}`);
			view(result);
			webSocket();
		});

		async function prev()
		{
			let result = await request("获取上一张图片", `view.ashx?cmd=prev&photo=${photoId}&owner=${owner}`);
			photoId = result.id;
			view(result);
		}

		async function next()
		{
			let result = await request("获取下一张图片", `view.ashx?cmd=next&photo=${photoId}&owner=${owner}`);
			photoId = result.id;
			view(result);
		}

		async function view(photo)
		{
			var width = parseInt($("#image").css("width")), height = parseInt($("#image").css("height"));
			$("p > a").attr("href", `/web/handler/download.ashx?cmd=photo&photo=${photo.id}`).html(photo.remark);
			$("#image").attr("full", photo.full).css("background", `url("${photo.url}&t=${new Date().getTime()}") no-repeat center center`);
			if (width < photo.width || height < photo.height)
				$("#image").css("background-size", width / height < photo.width / photo.height ? "100% auto" : "auto 100%");
			else
				$("#image").css("background-size", "auto auto");

			$("#info").html(`目录：${photo.dir}，作者：${photo.user}`);
			if (photo.mine) $("#op").show(); else $("#op").hide();

			$("div.left, div.right").show();
			if (!isMobile())
			{
				await sleep(2000);
				$("div.left, div.right").fadeOut();
			}
		}

		async function transform(type)
		{
			let result = await request(type == 1 ? "旋转图片" : "镜像图片", `view.ashx?cmd=transform&type=${type}&photo=${photoId}`, false);
			await view(result);
		}
	</script>

	<script>
		var X = null;
		function start()
		{
			var x = event.screenX;
			if (x == undefined) x = event.changedTouches[0].screenX;
			X = x = parseInt(x);
		}

		function end()
		{
			if (X == null) return;

			var x = event.screenX;
			if (x == undefined) x = event.changedTouches[0].screenX;

			$("#image").css({ "margin-left": 0, "margin-right": 0 });
			if (Math.abs(X - x) * 10 > window.innerWidth)
				x < X ? next() : prev();
			else
				window.open($("#image").attr("full"), "_blank");

			X = null;
		}

		function move()
		{
			event.preventDefault();

			if (!isMobile()) $("div.left, div.right").show();

			if (X == null) return;
			var x = event.screenX;
			if (x == undefined) x = event.changedTouches[0].screenX;

			$("#image").css({ "margin-left": x - X, "margin-right": X - x });
		}
	</script>

	<script>
		function webSocket()
		{
			let ws = new WebSocket(`ws://${location.href.substr(7).split("/")[0]}/web/handler/websocket.ashx`);
			ws.onmessage = async msg =>
			{
				let m = msg.data;
				let parts = m.split(":", 4);
				if (parts.length == 4 && parts[0] == "photo" && parts[1] == photoId)
					switch (parts[2])
					{
						case "src":
							let result = await request("获取图片", `view.ashx?cmd=view&photo=${photoId}`);
							view(result);
							break;

						case "title":
							$("p > a").html(parts[3]);
							break;
					}
			}
		}
	</script>
</head>
<body class="no-select-text" style="background-color:#333;overflow:hidden" title="可通过左右划动或键盘方向键←→或点击两边的半透明箭头来切换图片" onkeydown="if (event.keyCode == 37) prev(); else if (event.keyCode == 39) next();">

	<div style="margin: 0 auto; height:100%; overflow:hidden">
		<div style="height:calc(100% - 100px);position:relative">
			<div onclick="prev()" class="left"><button><i class="fa fa-angle-left"></i></button></div>
			<div id="image" onmousedown="start()" onmousemove="move()" onmouseup="end()" onmouseout="end()" ontouchstart="start()" ontouchmove="move()" ontouchend="end()" style="height:100%"></div>
			<div onclick="next()" class="right"><button><i class="fa fa-angle-right"></i></button></div>
		</div>
		<div id="op"><button style="font-size:30px" onclick="transform(1)"><i class="fa fa-rotate-right"></i></button><button style="font-size:30px" onclick="transform(2)"><i class="fa fa-arrows-h"></i></button></div>
		<div id="info"></div>
		<div style="text-align:center">
			<p><a></a></p>
		</div>
</body>
</html>